<template>
	<a-col v-bind="actionColOpt" v-if="showActionButtonGroup">
		<div style="width: 100%" :style="{ textAlign: actionColOpt.style.textAlign }">
			<FormItem>
				<slot name="resetBefore"></slot>
				<Button
					type="default"
					class="mr-2"
					v-bind="getResetBtnOptions"
					@click="resetAction"
					v-if="showResetButton"
				>
					{{ getResetBtnOptions.text }}
				</Button>
				<slot name="submitBefore"></slot>

				<Button
					type="primary"
					class="mr-2"
					v-bind="getSubmitBtnOptions"
					@click="submitAction"
					v-if="showSubmitButton"
				>
					{{ getSubmitBtnOptions.text }}
				</Button>

				<slot name="advanceBefore"></slot>
				<Button type="link" size="small" @click="toggleAdvanced" v-if="showAdvancedButton && !hideAdvanceBtn">
					{{ isAdvanced ? '收起' : '展开' }}
				</Button>
				<slot name="advanceAfter"></slot>
			</FormItem>
		</div>
	</a-col>
</template>
<script lang="ts">
import type { ColEx } from '../types/formItem';
import type { ButtonProps } from 'ant-design-vue/es/button/buttonTypes';
import { defineComponent, computed } from 'vue';
import { Form, Col, Button } from 'ant-design-vue';
import { useFormContext } from '../hooks/useFormContext';
import { basicFormActionProps } from '../props';

type ButtonOptions = Partial<ButtonProps> & { text: string };

export default defineComponent({
	name: 'BasicFormAction',
	components: {
		FormItem: Form.Item,
		[Col.name]: Col,
		Button,
	},
	props: basicFormActionProps,
	emits: ['toggle-advanced'],
	setup(props, { emit }) {
		const actionColOpt = computed(() => {
			const { showAdvancedButton, actionSpan: span, actionColOptions } = props;
			const actionSpan = 24 - span;
			const advancedSpanObj = showAdvancedButton ? { span: actionSpan < 6 ? 24 : actionSpan } : {};
			const actionColOpt: Partial<ColEx> = {
				style: { textAlign: 'right' },
				span: showAdvancedButton ? 6 : 4,
				...advancedSpanObj,
				...actionColOptions,
			};
			return actionColOpt;
		});

		const getResetBtnOptions = computed((): ButtonOptions => {
			return Object.assign(
				{
					text: '重置',
				},
				props.resetButtonOptions,
			);
		});

		const getSubmitBtnOptions = computed(() => {
			return Object.assign(
				{
					text: '查询',
				},
				props.submitButtonOptions,
			);
		});

		function toggleAdvanced() {
			emit('toggle-advanced');
		}

		return {
			actionColOpt,
			getResetBtnOptions,
			getSubmitBtnOptions,
			toggleAdvanced,
			...useFormContext(),
		};
	},
});
</script>
